<template>
  <common-card class="teaching-quality">
    <template #title
      >教学质量分析
      <span ref="tooltipRef" class="tooltip-wrapper">
        <a-tooltip placement="bottom" :getPopupContainer="() => tooltipRef">
          <template #title>
            <div class="overlay-content">
              <span>低于年级平均值时数据标红</span>
            </div>
          </template>
          <label class="explain-icon"></label>
        </a-tooltip> </span
    ></template>
    <!-- <template #operate
      ><span class="operate"
        ><span class="operate__desc">详情</span
        ><label class="operate__icon"></label></span
    ></template> -->
    <!-- <p class="top">
      <a-select :value="searchContent" placeholder="全部"></a-select>
      <span class="operate"
        ><label class="operate__icon"></label
        ><span class="operate__desc">导出</span></span
      >
    </p> -->
    <div class="table">
      <a-table
        :columns="TEACHING_QUALITY_COLUMN"
        :dataSource="dataList"
        :pagination="false"
        :scroll="{ y: 300 }"
      >
      </a-table>
    </div>
  </common-card>
</template>
<script setup>
import CommonCard from '../components/CommonCard.vue'
import { TEACHING_QUALITY_COLUMN } from '../constant'
import { ref } from 'vue'
const searchContent = ref('')
const tooltipRef = ref(null)
const dataList = ref([
  { practice: '全部', avg: '88.7%', first: '88.3%' },
  { practice: '第一课时 分数的意义（一）', avg: '88.7%', first: '88.3%' },
  { practice: '第一课时 分数的意义（二）', avg: '87.3%', first: '85.2%' }
])
</script>
<style lang="less" scoped>
@import '../style.less';

.teaching-quality {
  :deep(.ant-select) {
    max-width: 166px;
    min-width: 150px;

    .ant-select-selector {
      border-radius: @small-radius;
    }
  }

  .operate {
    &__icon {
      margin-left: 4px;
      background: url('@/assets/images/situation-report/right-arrow.png')
        no-repeat center/cover;
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .operate {
      &__icon {
        background: url('@/assets/images/situation-report/export.png') no-repeat
          center/cover;
        margin-right: 8px;
      }
    }
  }

  // .table {
  //   margin-top: @gap;
  // }
}
</style>
